.roadmap {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.roadmap-item {
  flex-grow: 1;
  padding: $roadmap_padding;
  position: relative;
  border-left-width: $roadmap_border_width;
  border-left-style: solid;
  border-left-color: $roadmap_border_color;

  &::before {
    content: attr(data-roadmap);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: $roadmap_font_weight;
    font-size: $roadmap_font_size;
    color: $roadmap_color;
    width: $roadmap_circle_width;
    height: $roadmap_circle_height;
    border-radius: 50%;
    background-color: $roadmap_bg;
    position: absolute;
    top: 0;
    left: -25px;
  }
}

.roadmap-content {
  max-width: 100%;
}

.roadmap-border {
  color: $roadmap_bg;
  &::before {
    background-color: $roadmap_color;
    color: currentColor;
    border: $roadmap_border_width solid currentColor;
  }
}
@each $key, $color in $theme_colors {
  .roadmap-#{$key} {
    &::before {
      background-color: $color;
    }
  }
}
